// 文件查找的规则   先从当前文件下去查找 对应的node_modules 如果有就用自己的 
// 如果没有那么找上一层 再没有继续上一层 直到 c盘 

const {
    resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                // 创建style 标签，将样式放入
                // 'style-loader',
                // 这个loader 取代style-loader。作用：提取js 中的css 成单独文件
                MiniCssExtractPlugin.loader,
                // 将css 文件整合到js 文件中
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                    ident: 'postcss',
                    plugins: () => [
                    // postcss 的插件
                    require('postcss-preset-env')()
                    ]
                    }
                    }
            ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            // 对输出的css 文件进行重命名
            filename: 'css/built.css'
        })
    ],
    mode: 'development'
};